<template>
  <div class="product-main-wrap">
    <ul class="product-list-ul">

      <li v-for="(item,index) in productListNew" :key="index" class="product-detail-card">
        <div @click="productDetailFn(item.id)">
          <div class="product-detail-pic">
            <a class="details-pic">
              <img :src="item.displayUrl" alt="">
            </a>
          </div>
          <div class="product-des-box">
            <div class="product-des-title">{{ item.itemName }}</div>
            <p class="product-card-price">
              <a class="card-price">
                <span class="price_box_sign">￥</span>
                <span gcode="1030031" class="price_box_price">{{ item.itemPriceDouble }}</span>
              </a>
            </p>
          </div>
        </div>

      </li>

    </ul>
    <div v-if="productListNew.length == 0" class="nodata">
      <img src="../../assets/image/no-img.png" alt="">
      <div>
        暂无商品哦~
      </div>

    </div>
  </div>

</template>
<script>
export default {
  name: 'ProductListIndex',
  components: {},
  props: {
    productList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      productListNew: [] // 商品数据
    }
  },

  computed: {

  },
  watch: {
    productList(newVal) {
      this.productListNew = newVal
    }
  },
  created() {
  },
  mounted() {

  },
  methods: {
    productDetailFn(id) { // 商品详情
      console.log('商品详情id', id)
      // 新开页面打开商品详情
      const newPage = this.$router.resolve({
        path: '/homePage/productDetail',
        query: {
          id: id
        }
      })
      window.open(newPage.href, '_blank')
    }
  }
}
</script>
<style  scoped lang="scss">
.product-main-wrap{
  .nodata{
    text-align: center;
    padding: 200px;
    color: #666;
  }
    .product-list-ul{
        display: flex;
        flex-wrap: wrap;
        li.product-detail-card:hover {
          box-shadow: 0 15px 15px rgba(0,0,0,0.5);
          transition: box-shadow .3s linear;
        }

        li{
          margin: 0 10px 24px 10px;
          margin-bottom: 24px;
          width: 220px;
          height: 324px;
          background: #fff;
          cursor: pointer;
            .product-detail-pic {
            width: 100%;
            width: 220px;
            height: 220px;

            overflow: hidden;
            .details-pic {
                width:100%;
                text-align: center;
                vertical-align: middle;
                display: inline-block;
                img{
                  width: 100%;
                  height: 100%;
                }
                }
            }
            .product-des-box{
              padding: 12px 12px 8px 12px;
              background: #fff;
                .product-des-title{
                  font-size: 16px;
                color: #666;
                width: 196px;
                overflow: hidden;
                text-overflow: ellipsis;
                height: 48px;
                line-height: 24px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                margin-bottom: 8px;

                }
                .product-card-price{

                    .card-price{
                        color: red;
                        .price_box_sign{
                            font-size: 14px;
                        }
                        .price_box_price{
                            font-size: 18px;
                            font-weight: 600;
                        }
                    }
                }
            }

        }

    }
}

</style>
